<template>
<!--  顶部图片-->
  <div style="margin-top: 0px ;text-align: center;" >
      <div style="overflow: hidden; height: 220px;">
  <!--  上方撑满整个横屏的图片-->
        <router-link to="/free">
          <img src="/course/freebc.jpg" alt="" style="width: 100%;">
        </router-link>
      </div>
      <div style="margin-top: 25px;z-index: -1;" >
<!--    下方卡片区-->
        <div style="width:95%; margin: 0 auto;">
          <el-row :gutter="20" style="margin-bottom: 20px">
            <el-col :span="6" v-for="course in course" :key="course.id">
              <el-card>
                <a href=""><img :src="course.imgurl" alt="" style="width:100%"></a>
                <div style="margin-bottom: 40px;">
                  <a href="" style="text-decoration: none; color: black"><h3>{{ courseList.title }}</h3></a>
                  <span v-if="courseList.paymentprice === 0" style="color: aqua; float: left;">免费</span>
                  <span v-else style="color: red; float: left;">{{ courseList.paymentprice }}元</span>
                  <span style="float: right;">报名数:{{ courseList.participant }}人</span>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
<!--    加载更多的点击方块，占父级宽度的100%-->
          <div style="height: 20px;">
            <a href="" style="text-decoration: none;color: #282c30">
              加载更多
            </a>
          </div>
      </div>
  </div>

</template>


<script setup>
import {ref} from "vue";

// 定义数组保存课程信息
const courseList =()=>{

}
</script>


<style scoped>

</style>